<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 整体容器 */
        .container {
            width: 800px;
            height: 600px;
            margin: 20px auto;
            background-color: darkblue;
            border: 2px solid #ccc;
            padding: 10px;
            font-family: Arial, sans-serif;
        }
        
        .text {
            position: absolute;
            top: 50px; /* 根据需要调整 */
            left: 50px; /* 根据需要调整 */
            font-family: 'Arial', sans-serif;
            color: white; /* 文字颜色 */
            font-size: 24px; /* 文字大小 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 阴影效果 */
        }
        
        .blue{
        	position: absolute;
            top: 50px; /* 根据需要调整 */
            left: 50px; /* 根据需要调整 */
            font-family: 'Arial', sans-serif;
            color: white; /* 文字颜色 */
            font-size: 24px; /* 文字大小 */
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 阴影效果 */
        	font-size: 6em;
        	font-style: oblique;
        	font-weight:bold;
        }

        /* 左边地图部分 */
        .map {
            width: 380px;
            height: 100%;
            background-image: url(../img/road.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-color: darkblue; /* 背景颜色从紫色渐变到蓝色 */
            position: relative;
            float: left;
            border: 1px solid #000;
        }


        /* 右边内容部分 */
        .content {
            width: 380px;
            height: 100%;
            background-color: darkblue;
            float: right;
            padding: 10px;
            border: 1px solid #000;
        }

        /* 内容文本样式 */
        .content h2 {
            margin-bottom: 10px;
            color: #333;
        }

        .content p {
            margin-bottom: 10px;
            color: #555;
        }

        /* 伪停坐标链接样式 */
        .coordinates-link {
            display: inline-block;
            margin: 5px 0;
            padding: 5px 10px;
            background-color: #ff9900;
            color: #fff;
            text-decoration: none;
            border-radius: 3px;
        }

        /* 鼠标悬停时的样式 */
        .coordinates-link:hover {
            background-color: #cc7a00;
        }

        /* 清除浮动 */
        .clearfix::after {
            content: "";
            clear: both;
            display: table;
        }
        
        .bottom-image {
            margin-bottom: auto;
            width="300";
            height="200";
        }
        
        .img7{
        	position: absolute; /* 设置图片为绝对定位 */
            top: 30px; /* 距离顶部50px */
            left: 250px; /* 距离左侧100px */
            width: 50px;
            height: auto;
        }
        .img5{
        	position: absolute; /* 设置图片为绝对定位 */
            top: 40px; /* 距离顶部50px */
            left: 100px; /* 距离左侧100px */
            width: 80px;
            height: auto;
        }
        .img3{
        	position: absolute; /* 设置图片为绝对定位 */
            top: 240px; /* 距离顶部50px */
            left: 280px; /* 距离左侧100px */
            width: 100px;
            height: auto;
        }
        .img2{
        	position: absolute; /* 设置图片为绝对定位 */
            top: 300px; /* 距离顶部50px */
            left: 0px; /* 距离左侧100px */
            width: 150px;
            height: auto;
        }
        
        
    </style>
	</head>
	<body>
		<div class="container clearfix">
	        <!-- 左边地图部分 -->
	        <div class="map">
	            <img src="../img/icon7.png" alt="示例图片" class=img7>
	            <img src="../img/icon5.png" alt="示例图片" class=img5>
	            <img src="../img/icon3.png" alt="示例图片" class=img3>
	            <img src="../img/icon2.png" alt="示例图片" class=img2>
	        </div>
	
	        <!-- 右边内容部分 -->
	        <div class="content">
	        	<img src="../img/car.png" alt="示例图片" class=bottom-image>
	            <p class="blue" style="top: 240px; left: 450px; color: blue;">查违</p>
	            <p class="text" style="top: 350px; left: 450px; color: white;">及时、迅速、精准、便捷</p>
	        </div>
    	</div>
	</body>
</html>
